 <template>  
  <div class="third">  
    <div v-if="filteredList.length === 0" class="no-items">  
      没有未完成的项。  
    </div>  
    <div class="item" v-else v-for="item in filteredList" :key="item.content">  
      {{ item.content }}  
    </div>  
  </div>  
</template>  
  
<script setup>  
import { defineProps, computed } from 'vue';  
  
const props = defineProps({  
  addList: {  
    type: Array,  
    required: true  
  }  
});  
  
// 计算属性，用于过滤出未完成的项  
const filteredList = computed(() => {  
  return props.addList.filter(item => !item.completed);  
});  
</script> 
    
<style scoped>  
.third {  
  padding: 20px;  
  background-color: #f4f4f4; 
  border-radius: 5px;  
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);   
}  
  
.item {  
  margin-bottom: 10px;   
  padding: 10px;  
  background-color: #fff;   
  border-radius: 5px;   
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);   
  display: flex;   
  align-items: center;   
  justify-content: space-between;   
}  
  
.item button {  
  padding: 5px 10px;  
  border: none;  
  border-radius: 3px;  
  cursor: pointer;  
  font-size: 14px;  
}  
  
.item button:first-child {  
  background-color: #ff5733;   
  color: #fff;   
}  
  
.item button:last-child {  
  background-color: #409eff;   
  color: #fff;  
}  
  
.no-items {  
  text-align: center;   
  padding: 20px;  
  font-size: 16px;  
  color: #888;   
}  
</style>